<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" :style="{ width: 'auto', maxWidth: '90vw', maxHeight: '90vh' }"
    class="auto-dialog">
    <!-- 自适应列表数据 分页 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="data" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="订单编号" align="center" prop="orderNo"/>
        <el-table-column label="客人姓名" align="center" prop="guestName" />
        <el-table-column label="房型名称" align="center" prop="roomType" />
        <el-table-column v-if="false" label="计划入住时间" align="center" prop="plannedCheckIn" :formatter="dateFormatter"
          width="180px" />
        <el-table-column v-if="false" label="计划离店时间" align="center" prop="plannedCheckOut" :formatter="dateFormatter"
          width="180px" />
        <el-table-column label="计划入离时间" align="center" width="220px">
          <template #default="scope">
            {{ dateFormatter1(scope.row.plannedCheckIn) }} - {{ dateFormatter1(scope.row.plannedCheckOut) }}
          </template>
        </el-table-column>
        <el-table-column label="实际住宿夜数" align="center" prop="actualNights" />
        <el-table-column label="实际离店日期" align="center" prop="actualCheckoutDate" />
        <el-table-column label="订单实付金额（元）" align="center" prop="amountPaid" />
        <el-table-column label="退款金额（元）" align="center" prop="refundAmount" />
        <el-table-column label="订单实收金额" align="center" prop="amountReceived" />
        <el-table-column label="平台佣金（元）" align="center" prop="platformCommission" />
        <el-table-column label="结算金额" align="center" prop="settlementAmount" />
        <el-table-column label="提现状态" align="center" prop="withdrawStatus">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.WITHDRAWAL_STATUS_TYPE" :value="scope.row.withdrawStatus" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />

      </el-table>
      <!-- 分页 -->
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getList" />
    </ContentWrap>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {  dateFormatter,dateFormatter1 } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import * as OrderWithdrawalSummaryApi from '@/api/hotel/orderwithdrawalsummary'

// 定义组件名称
defineOptions({ name: 'OrderWithdrawalSummaryDetail' })

// 响应式数据
const dialogVisible = ref(false)
const dialogTitle = ref('订单明细预览')
const data = ref<any>(null)
var loading = false;
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orderNo: undefined,
  guestName: undefined,
  roomType: undefined,
  plannedCheckIn: undefined,
  plannedCheckOut: undefined,
  actualNights: undefined,
  actualCheckoutDate: [],
  amountPaid: undefined,
  refundAmount: undefined,
  amountReceived: undefined,
  platformCommission: undefined,
  settlementAmount: undefined,
  withdrawStatus: undefined,
  createdAt: undefined,
  updatedAt: undefined,
  withdrawBatchNo: '',
})
const total = ref(0);
// 打开弹窗方法
const open = async (withdrawBatchNo: string) => {
 
  dialogVisible.value = true
  queryParams.withdrawBatchNo = withdrawBatchNo;
  const info = await OrderWithdrawalSummaryApi.getByWithdrawBatchNo(queryParams);
  //todo 也可使用订单号查询
  data.value = info.list;
  total.value = info.total;
  dialogTitle.value = `订单明细预览`
}
const getList = async () => {
  const info = await OrderWithdrawalSummaryApi.getByWithdrawBatchNo(queryParams);
  //todo 也可使用订单号查询
  data.value = info.list;
  total.value = info.total;
}

// 暴露方法给父组件调用
defineExpose({
  open
})
</script>

<style scoped>

.auto-dialog :deep(.el-dialog) {
  width: auto !important;
  max-width: 90vw;
  max-height: 90vh;
  min-width: 300px;
}
.auto-dialog :deep(.el-dialog__body) {
  max-height: calc(90vh - 120px); 
  overflow-y: auto;
}
</style>